<template>
	<view>
		<view class="content_container">
			<view class="input_box">
				<input type="text" v-model="mobileFormatVal" @click='keyboarOpen' placeholder="请输入手机号码"
					placeholder-style="font-size:32rpx;font-weight:normal" />
			</view>


			<!-- <button type="default" class="borderless-button">立即领取</button> -->
			<view class="btn_box"><button :disabled="!agree || value.length<11" @click="xx">立即领取</button>
			</view>
			<view class="protocol_box">
				<view class="select" :class="{active: agree}" @click="agree = !agree || value.length<11"></view>
				我已同意
				<text @click.stop="toServiceAgreement">《用户服务协议》</text>
				和
				<text @click.stop="toPrivacyAgreement">《隐私协议》</text>

			</view>
		</view>
		<text class="content_list_title">
			--活动规则--
		</text>
		<view class="content_list" v-for="(item,index) in dataList" :key="index">
			<view class="content_list_con">
				<view class="content_list_con_title">
					{{item.title}}
				</view>
				<view class="content_list_con_content">{{item.content}}</view>
			</view>
		</view>


		<number-keyboard ref='KeyboarHid' v-model="value" :psdLength='valArr[currentKey].lng'></number-keyboard>
	</view>
</template>

<script>
	import numberKeyboard from '../components/number-keyboard/number-keyboard.vue'
	export default {
		components: {
			numberKeyboard
		},
		data() {
			return {
				mobileFormatVal: '', //格式化后的手机号

				errMsg: '', //错误信息
				agree: false, //同意注册协议及隐私协议标志

				value: '', //数字键盘输入的值
				currentKey: 0,
				valArr: [{
					val: '',
					lng: 11
				}, {
					val: '',
					lng: 4
				}],
				dataList: [{
						title: '权益名称',
						content: 'xxxxxxxxx'
					},
					{
						title: '权益名称',
						content: 'xxxxxxxxx'
					},
					{
						title: '权益名称',
						content: 'xxxxxxxxx'
					},
					{
						title: '权益名称',
						content: 'xxxxxxxxx'
					},
					{
						title: '权益名称',
						content: 'xxxxxxxxx'
					},
					{
						title: '权益名称',
						content: 'xxxxxxxxx'
					}
				]
			}
		},
		onLoad() {
			let token = uni.getStorageSync("token");
			if (token != null && token != '') {
				uni.navigateTo({
					url: '/pages/myInterest/index'
				})
			}
		},
		watch: {
			value: function(newVal, oldVal) {
				if (this.currentKey == 0) {
					// 判断输入框中的内容是否需要添加空格
					if (newVal.length > 3 && newVal.length < 8) {
						this.mobileFormatVal = newVal.slice(0, 3) + ' ' + newVal.slice(3);
					} else if (newVal.length >= 8) {
						this.mobileFormatVal = newVal.slice(0, 3) + ' ' + newVal.slice(3, 7) + ' ' + newVal
							.slice(7, 11);
					} else {
						this.mobileFormatVal = newVal;
					}
				}
			}
		},
		methods: {
			a1() {
				var s = 1
			},
			/**
			 * 弹出键盘
			 * @param {Object} 
			 */
			keyboarOpen(e) {
				this.errMsg = '';
				this.$refs.KeyboarHid.open()
			},
			/**
			 * 手机号校验
			 * @param {Object} phone手机号
			 */
			checkPhone(phone) {
				var reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
				return reg.test(phone)
			},
			/**
			 * 发送验证码
			 * @param {Object} 
			 */
			getSmsCode(e) {
				if (!this.checkPhone(this.value)) {
					this.errMsg = "手机号码格式不正确";
					return;
				}
				//重置错误信息
				this.errMsg = '';
				//发送验证码同时重置值并关闭键盘
				this.$refs.KeyboarHid.close();
				uni.navigateTo({
					url: '/pages/codeValidate/index?mobile=' + this.value
				})
			},
			toServiceAgreement() {
				uni.navigateTo({
					url: '/pages/serviceAgreement/index'
				})
			},
			toPrivacyAgreement() {
				uni.navigateTo({
					url: '/pages/privacyAgreement/index'
				})
			},
		}
	}
</script>


<style lang="scss">
	//按钮
	.btn_box {
		margin-top: 40rpx;

		button {
			font-size: 32rpx;
			color: #ffffff;
			background-image: linear-gradient(270deg, #FF5745 0%, #FF8042 100%);
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 48rpx;
		}

		button[disabled] {
			opacity: 0.5;
		}
	}

	.content_list_title {
		align-items: center;
		display: flex;
		flex-direction: row;
		margin-top: 80rpx;
		justify-content: center;
		/* 水平居中 */
	}

	.content_list {
		width: 100%;
		margin: 20rpx 30rpx;
	}

	.content_list_con {
		width: 100%;
	}

	//主内容区容器
	.content_container {
		padding: 40rpx 64rpx 0 64rpx;
	}

	button::after {
		border: none;
	}

	.borderless-button {
		border: none;
		border-radius: 12px;
		margin-top: 50rpx;
		align-items: center;
	}

	//手机号输入框样式
	.input_box {
		margin-top: 40rpx;
		height: 104rpx;
		padding: 0 0 0 32rpx;
		background: #F8F8F8;
		border-radius: 12px;
		border: none;


		input {
			height: 104rpx;
			line-height: 104rpx;
			font-size: 32rpx;
			font-weight: 600;
		}
	}

	//隐私协议
	.protocol_box {
		margin-top: 40rpx;
		display: flex;
		width: 100%;
		font-size: 24rpx;
		color: #999999;

		.select {
			width: 32rpx;
			height: 32rpx;
			background-image: url("../../static/icon/ic_gender_unselected.png");
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 100% auto;
			margin-right: 15rpx;

			&.active {
				background-image: url("../../static/icon/ic_agreed.png");
			}
		}


		text {
			color: #008CFF;
		}
	}
</style>